<template>
    <div class="e-select-rank-main" @mouseleave="mouseLeave">
        <div class="input" @click="openValue">
            <div class="showTags">
                <span v-if="!selectList.length">选择话题(最多三个)</span>
                <div class="tag-item" v-for="(item, index) in selectList" :key="index"
                     @click.stop="handleDelete(item, index)">
                    {{item.topicName}}
                </div>
            </div>
            <img src="@assets/arrow-down.png" alt="">
        </div>
        <div class="options-list" v-show="show">
            <ul class="classify">
                <li v-for="(item, index) in tableData"
                    :key="item.topicTypeName"
                    @mouseenter="handleTab(item, index)"
                    :class="hoverIndex == index ? 'hoverStyle' : ''"
                >
                    {{item.topicTypeName}}
                </li>
            </ul>
            <ul class="topic">
                <li @click="getValue(index,item)" v-for="(item,index) in topicList" :key="item.topicName"
                    :class="item.selected ? 'active' :''">
                    {{item.topicName}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import EInput from './EInput'
    
    export default {
        name: "SelectBtn",
        data() {
            return {
                show: false,
                topicList: this.tableData[0],
                selectList: this.selectData,
                hoverIndex: 0
            }
        },
        components: {
            EInput
        },
        props: {
            tableData: {
                type: Array,
                default: () => []
            },
            placeholder: {
                type: String,
                default: '选择板块'
            },
            selectData: {
                type: Array,
                default: () => []
            }
        },
        watch: {
            tableData(newValue) {
                this.topicList = newValue[0].bbsTopicList
            },
            selectData(newValue) {
                this.selectList = newValue
            },
            selectList(newValue) {
                this.$emit('getContent', newValue)
            }
        },
        methods: {
            openValue() {
                this.show = !this.show
            },
            getValue(index, item) {
                let len = this.selectList.length
                let hasTag = false
                
                this.selectList.forEach((subItem, subIndex) => {
                    if (item.topicId === subItem.topicId) {
                        hasTag = true
                        return
                    }
                })
                if (hasTag) return
                if (len < 3) {
                    this.selectList.push(item)
                } else {
                    return
                    // this.selectList.shift()
                    // this.selectList.push(item)
                }
            },
            handleTab(item, index) {
                this.hoverIndex = index
                this.topicList = item.bbsTopicList
                
                /*this.selectList.forEach((j, k) => {
                    this.topicList.forEach((subItem, subIndex) => {
                        if (j.topicId == subItem.topicId) {
                            subItem.selected = true
                        } else {
                            subItem.selected = false
                        }
                    })
                })*/
                
            },
            mouseLeave() {
                this.hoverIndex = 0
                this.show = false
            },
            handleDelete(item, index) {
                this.selectList.splice(index, 1)
                // console.log(item)
            }
        }
    }
</script>

<style lang="less" scoped>
    .e-select-rank-main {
        position: relative;
        height: 40px;
        width: 424px;
        margin-top: 20px;
        margin-left: 21px;
    }
    
    .input {
        height: 40px;
        width: 424px;
        position: relative;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, .04);
        padding-left: 16px;
        
        img {
            position: absolute;
            width: 10px;
            height: auto;
            right: 14px;
            top: 45%;
        }
        
        .showTags {
            height: 40px;
            font-size: 14px;
            /*font-weight: bold;*/
            color: rgba(0, 0, 0, .4);
            
            .flexed(flex-start, center);
            
            span {
                cursor: default;
            }
            
            .tag-item {
                height: 28px;
                background: rgba(255, 220, 32, 0.16);
                border-radius: 14px;
                border: 1px solid rgba(255, 220, 32, 1);
                line-height: 28px;
                margin-right: 8px;
                cursor: pointer;
                font-size: 14px;
                /*font-weight: bold;*/
                color: rgba(0, 0, 0, 1);
                padding-left: 8px;
                max-width: 121px;
                overflow: hidden; //超出的文本隐藏
                text-overflow: ellipsis; //溢出用省略号显示
                white-space: nowrap;
                padding-right: 29px;
                position: relative;
                
                &:after {
                    position: absolute;
                    content: '';
                    display: block;
                    top: 8px;
                    right: 9px;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    overflow: hidden;
                    background: url('~@assets/error.png') 0 0 no-repeat;
                    -webkit-background-size: 100% 100%;
                    background-size: 100% 100%;
                }
            }
        }
    }
    
    .options-list {
        position: absolute;
        .flexed(flex-start, top);
        height: 300px;
        width: 424px;
        background-color: #fff;
        overflow: auto;
        cursor: pointer;
        z-index: 999;
        
        .classify {
            width: 80px;
            background: rgba(0, 0, 0, .04);
            
            li {
                width: 100%;
                height: 40px;
                cursor: pointer;
                line-height: 40px;
                font-size: 14px;
                font-weight: bold;
                color: rgba(0, 0, 0, 1);
                text-align: center;
                
                /*&:hover {
                    background: #ffdc20;
                }*/
            }
            
            .hoverStyle {
                background: #ffdc20;
            }
        }
        
        .topic {
            width: 344px;
            height: 300px;
            overflow-y: auto;
            li {
                width: 100%;
                height: 40px;
                cursor: pointer;
                line-height: 40px;
                font-size: 14px;
                font-weight: bold;
                color: rgba(0, 0, 0, 1);
                text-align: center;
                
                &:hover {
                    background-color: rgba(0, 0, 0, .04);
                }
            }
        }
        
        .active {
            color: #ffdc20 !important;
            font-weight: bold !important;
        }
    }
</style>
